<template>
    <l-page class="pb-3 block">
        <l-navbar title="提前还款" />
        <view class="panel">
            <u-steps :current="step">
                <u-steps-item title="填写资料"></u-steps-item>
                <u-steps-item title="获取结果"></u-steps-item>
            </u-steps>
            <view class="my-3 border-b border-gray-200"></view>
            <template v-if="step == 0">

                <l-select label="贷款类型" :list="monthlyTypes.list" v-model="formData.repayType" />
                <l-input label="贷款金额" class="mt-3" type="digit" v-model="formData.repayNum" suffix="万元"></l-input>
                <l-select label="贷款年限" class="mt-3" :list="life" v-model="formData.repayTime"></l-select>
                <l-select label="利&emsp;&emsp;率" class="mt-3" :list="rates" v-model="formData.rateType"></l-select>
                <l-date-time label="首次还款时间" class="mt-3" formatter="YYYY-MM" v-model="formData.firstTime"></l-date-time>
                <l-date-time label="拟提前还款时间" class="mt-3" formatter="YYYY-MM" v-model="formData.advTime"></l-date-time>
                <view class="mt-3 flex items-center">
                    <view class="mr-3">还款方式</view>
                    <u-radio-group placement="row" v-model="formData.repayMode">
                        <template v-for="(item, index) in repaymentMethod" :key="index">
                            <u-radio shape="circle" :label="item.label" :name="item.value"></u-radio>
                            &emsp;
                        </template>
                    </u-radio-group>
                </view>
                <l-input label="提前还款部分" class="mt-3" type="digit" v-if="formData.repayMode == 'part'"
                    v-model="formData.partInput"></l-input>
                <view class="mt-3 flex items-center" v-if="formData.repayMode == 'part'">
                    <view class="mr-3">处理方式</view>
                    <u-radio-group v-model="formData.repayMethod">
                        <template v-for="(item, index) in processingMethod" :key="index">
                            <u-radio shape="circle" :label="item.label" :name="item.value"></u-radio>
                        </template>
                    </u-radio-group>
                </view>
                <l-button type="primary" class="mt-3" @tap="cal">开始计算</l-button>
            </template>
            <template v-else>
                <view class="l-table mt-3">
                    <view class="span-2">原月还款额</view>
                    <view class="span-2">{{ result.resultNum }}</view>
                    <!-- br -->
                    <view class="span-2">原最后还款期</view>
                    <view class="span-2">{{ result.resultDate }}</view>
                    <!-- br -->
                    <view class="span-2">已还款总额</view>
                    <view class="span-2">{{ result.resultAlready }}</view>
                    <!-- br -->
                    <view class="span-2">已还利息额</view>
                    <view class="span-2">{{ result.resultAlreadyInterest }}</view>
                    <!-- br -->
                    <view class="span-2">该月一次还款额</view>
                    <view class="span-2">{{ result.resultOnce }}</view>
                    <!-- br -->
                    <view class="span-2">下月起月还款额</view>
                    <view class="span-2">{{ result.resultNextMonth }}</view>
                    <!-- br -->
                    <view class="span-2">节省利息支出</view>
                    <view class="span-2">{{ result.resultSave }}</view>
                    <!-- br -->
                    <view class="span-2">新的最后还款期</view>
                    <view class="span-2">{{ result.resultDateNew }}</view>
                </view>
                <l-button class="mt-3" @tap="step = 0">上一步</l-button>
            </template>
        </view>
    </l-page>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
let step = ref(0);
let monthlyTypes = reactive({
    list: [{
        label: "商业贷款",
        value: 0
    }, {
        label: "公积金贷款",
        value: 1
    }],
    active: 0
}), result = reactive<{ [key: string]: any }>({
    // 原月还款额
    resultNum: 0,
    // 原最后还款期
    resultDate: "",
    // 已还款总额
    resultAlready: "",
    // 已还利息额
    resultAlreadyInterest: "",
    // 该月一次还款额
    resultOnce: "",
    // 下月起月还款额
    resultNextMonth: "",
    // 节省利息支出
    resultSave: "",
    // 新的最后还款期
    resultDateNew: "",
    // 计算结果提示
    resultTip: "*以上结果仅供参考"
}), formData = reactive<{ [key: string]: any }>({
    // 还款类型
    repayType: 0,
    // 原房贷金额
    repayNum: '',
    // 原房贷年限
    repayTime: '',
    // 利率
    rateType: '',
    // 第一次还款时间
    firstTime: '',
    // 预计提前还款时间
    advTime: '',
    // 还款方式
    repayMode: 'all',
    // 提前还款额
    partInput: '',
    // 处理方式
    repayMethod: 'short',

});
const life: any[] = [];
for (let i = 2; i < 31; i++) {
    life.push({
        value: i * 12,
        label: `${i}年（${i * 12}期）`
    })
};

const rates = [{
    value: 38,
    label: "15年10月24日利率上限（1.3倍）"
}, {
    value: 37,
    label: "15年10月24日利率上限（1.2倍）"
}, {
    value: 36,
    label: "15年10月24日利率上限（1.1倍）"
}, {
    value: 35,
    label: "15年10月24日利率上限（1.05倍）"
}, {
    value: 34,
    label: "15年10月24日利率下限（95折）"
}, {
    value: 33,
    label: "15年10月24日利率下限（9折）"
}, {
    value: 32,
    label: "15年10月24日利率下限（88折）"
}, {
    value: 31,
    label: "15年10月24日利率下限（85折）"
}, {
    value: 30,
    label: "15年10月24日利率下限（7折）"
}, {
    value: 29,
    label: "15年10月24日基准利率"
}, {
    value: 28,
    label: "15年8月26日利率上限（1.1倍）"
}, {
    value: 27,
    label: "15年8月26日利率下限（85折）"
}, {
    value: 26,
    label: "15年8月26日利率下限（7折）"
}, {
    value: 25,
    label: "15年8月26日基准利率"
}, {
    value: 24,
    label: "15年6月28日利率上限（1.1倍）"
}, {
    value: 23,
    label: "15年6月28日利率下限（85折）"
}, {
    value: 22,
    label: "15年6月28日利率下限（7折）"
}, {
    value: 21,
    label: "15年6月28日基准利率"
}, {
    value: 20,
    label: "15年5月11日利率上限（1.1倍）"
}, {
    value: 19,
    label: "15年5月11日利率下限（85折）"
}, {
    value: 18,
    label: "15年5月11日利率下限（7折）"
}, {
    value: 17,
    label: "15年5月11日基准利率"
}, {
    value: 16,
    label: "15年3月1日利率上限（1.1倍）"
}, {
    value: 15,
    label: "15年3月1日利率下限（85折）"
}, {
    value: 14,
    label: "15年3月1日利率下限（7折）"
}, {
    value: 13,
    label: "15年3月1日基准利率"
}, {
    value: 12,
    label: "14年11月22日利率上限（1.1倍）"
}, {
    value: 11,
    label: "14年11月22日利率下限（85折）"
}, {
    value: 10,
    label: "14年11月22日利率下限（7折）"
}, {
    value: 9,
    label: "14年11月22日基准利率"
}, {
    value: 8,
    label: "12年7月6日利率上限（1.1倍）"
}, {
    value: 7,
    label: "12年7月6日利率下限（85折）"
}, {
    value: 6,
    label: "12年7月6日利率下限（7折）"
}, {
    value: 5,
    label: "12年7月6日基准利率"
}, {
    value: 4,
    label: "12年6月8日利率上限（1.1倍）"
}, {
    value: 3,
    label: "12年6月8日利率下限（85折）"
}, {
    value: 2,
    label: "12年6月8日利率下限（7折）"
}, {
    value: 1,
    label: "12年6月8日基准利率"
}],
    repaymentMethod = [
        {
            label: '一次还清',
            value: 'all'
        },
        {
            label: '部分提前还款',
            value: 'part'
        },
    ],
    processingMethod = [
        {
            label: '缩短还款期限，月还款额基本不变',
            value: 'short'
        },
        {
            label: '减少月还款额，还款期限不变',
            value: 'reduce'
        },
    ]
const toast = (msg: string) => {
    uni.showToast({
        title: msg,
        icon: 'none'
    })
}
const cal = function () {
    var a = { ...formData }
        , s = a.repayNum
        , o = a.repayMode
        , n = a.partInput ? a.partInput : "";
    a.firstYear = formData.firstTime.split('-')[0] * 1;
    a.firstMonth = formData.firstTime.split('-')[1] * 1;
    a.advYear = formData.advTime.split('-')[0] * 1;
    a.advMonth = formData.advTime.split('-')[1] * 1;
    console.log(a.repayTime)
    if (!s)
        return void toast("请填入贷款总额");
    if (s = 1e4 * parseFloat(s),
        "part" === o && !n)
        return void toast("请填入部分提前还款额度");
    var r = a.repayTime
        , c = 0;
    1 === a.repayType && (c = r > 60 ? getlilv(a.rateType, 2, 10) / 12 : getlilv(a.rateType, 2, 3) / 12),
        0 === a.repayType && (c = r > 60 ? getlilv(a.rateType, 1, 10) / 12 : getlilv(a.rateType, 1, 3) / 12);
    var u = 12 * a.advYear + a.advMonth - (12 * a.firstYear + a.firstMonth);
    if (u < 0 || u > r)
        return toast("预计提前还款时间与第一次还款时间有矛盾，请查实"),
            !1;
    for (var h = s * (c * Math.pow(1 + c, r)) / (Math.pow(1 + c, r) - 1), v = Math.floor((12 * a.firstYear + a.firstMonth + r - 2) / 12) + "年" + ((12 * a.firstYear + a.firstMonth + r - 2) % 12 + 1) + "月", m = h * u, p = 0, d = 0, f = 1; f <= u; f++)
        p += (s - d) * c,
            d = d + h - (s - d) * c;
    var _ = ""
        , w = 0
        , y = 0
        , g = 0
        , x: string | number = 0;
    if ("part" === o)
        if ((n = 1e4 * parseInt(n, 10)) + h >= (s - d) * (1 + c))
            _ = "您的提前还款额已足够还清所欠贷款！";
        else if (
            d += h,
            w = h + n,
            "short" === a.repayMethod) {
            var j = d + n
                , C = 0;
            for (C = 0; j <= s; C++)
                j = j + h - (s - j) * c;
            C -= 1,
                y = (s - d - n) * (c * Math.pow(1 + c, C)) / (Math.pow(1 + c, C) - 1),
                g = h * r - m - w - y * C,
                x = Math.floor((12 * a.advYear + a.advMonth + C - 2) / 12) + "年" + ((12 * a.advYear + a.advMonth + C - 2) % 12 + 1) + "月"
        } else
            "reduce" === a.repayMethod && (y = (s - d - n) * (c * Math.pow(1 + c, r - u)) / (Math.pow(1 + c, r - u) - 1),
                g = h * r - m - w - y * (r - u),
                x = v);
    "all" !== o && "" == _ || (w = (s - d) * (1 + c),
        y = 0,
        g = h * r - m - w,
        x = a.advYear + "年" + a.advMonth + "月");
    var M = result
        , b = Math.round(100 * h) / 100
        , A = Math.round(100 * m) / 100
        , T = Math.round(100 * p) / 100
        , I = Math.round(100 * w) / 100
        , R = Math.round(100 * y) / 100
        , k = Math.round(100 * g) / 100;
    M.resultNum = b > 1e4 ? (b / 1e4).toFixed(2) + "万" : b,
        M.resultNum = b > 1e8 ? (b / 1e8).toFixed(2) + "亿" : b,
        M.resultDate = v,
        M.resultAlready = formatNumber(A),
        M.resultAlreadyInterest = formatNumber(T),
        M.resultOnce = formatNumber(I),
        M.resultNextMonth = formatNumber(R),
        M.resultSave = formatNumber(k),
        M.resultDateNew = x,
        M.resultTip = _;
    step.value = 1
}
const getlilv = function (t: any, e: any, a: any) {
    var s = getArrayIndexFromYear(a, 1)
        , i = getArrayIndexFromYear(a, 2);
    return t = parseInt(t, 10),
        1 == e ? getN()[t][e][s] : 2 == e ? getN()[t][e][i] : void 0
}
const getArrayIndexFromYear = function (t: number, e: number) {
    var a = 0;
    return 1 == e ? a = 1 == t ? 1 : t > 1 && t <= 3 ? 3 : t > 3 && t <= 5 ? 5 : 10 : 2 == e && (a = t > 5 ? 10 : 5),
        a
}
const formatNumber = function (t: number) {
    return t > 1e9 ? parseFloat((t / 1e8).toFixed(2)) + "亿" : t > 1e8 ? parseFloat((t / 1e4).toFixed(2)) + "万" : Math.round(t)
}
const getN = () => {
    var s: any = [];
    s[1] = [],
        s[1][1] = [],
        s[1][2] = [],
        s[1][1][1] = .0631,
        s[1][1][3] = .064,
        s[1][1][5] = .0665,
        s[1][1][10] = .068,
        s[1][2][5] = .042,
        s[1][2][10] = .047,
        s[2] = [],
        s[2][1] = [],
        s[2][2] = [],
        s[2][1][1] = .04417,
        s[2][1][3] = .0448,
        s[2][1][5] = .04655,
        s[2][1][10] = .0476,
        s[2][2][5] = .042,
        s[2][2][10] = .047,
        s[3] = [],
        s[3][1] = [],
        s[3][2] = [],
        s[3][1][1] = .053635,
        s[3][1][3] = .0544,
        s[3][1][5] = .056525,
        s[3][1][10] = .0578,
        s[3][2][5] = .042,
        s[3][2][10] = .047,
        s[4] = [],
        s[4][1] = [],
        s[4][2] = [],
        s[4][1][1] = .06941,
        s[4][1][3] = .0704,
        s[4][1][5] = .07315,
        s[4][1][10] = .0748,
        s[4][2][5] = .042,
        s[4][2][10] = .047,
        s[5] = [],
        s[5][1] = [],
        s[5][2] = [],
        s[5][1][1] = .06,
        s[5][1][3] = .0615,
        s[5][1][5] = .064,
        s[5][1][10] = .0655,
        s[5][2][5] = .04,
        s[5][2][10] = .045,
        s[6] = [],
        s[6][1] = [],
        s[6][2] = [],
        s[6][1][1] = .042,
        s[6][1][3] = .04305,
        s[6][1][5] = .0448,
        s[6][1][10] = .04585,
        s[6][2][5] = .04,
        s[6][2][10] = .045,
        s[7] = [],
        s[7][1] = [],
        s[7][2] = [],
        s[7][1][1] = .051,
        s[7][1][3] = .052275,
        s[7][1][5] = .0544,
        s[7][1][10] = .055675,
        s[7][2][5] = .04,
        s[7][2][10] = .045,
        s[8] = [],
        s[8][1] = [],
        s[8][2] = [],
        s[8][1][1] = .066,
        s[8][1][3] = .06765,
        s[8][1][5] = .0704,
        s[8][1][10] = .07205,
        s[8][2][5] = .04,
        s[8][2][10] = .045,
        s[9] = [],
        s[9][1] = [],
        s[9][2] = [],
        s[9][1][1] = .06,
        s[9][1][3] = .06,
        s[9][1][5] = .06,
        s[9][1][10] = .0615,
        s[9][2][5] = .0375,
        s[9][2][10] = .0425,
        s[10] = [],
        s[10][1] = [],
        s[10][2] = [],
        s[10][1][1] = .042,
        s[10][1][3] = .042,
        s[10][1][5] = .042,
        s[10][1][10] = .04305,
        s[10][2][5] = .02625,
        s[10][2][10] = .02975,
        s[11] = [],
        s[11][1] = [],
        s[11][2] = [],
        s[11][1][1] = .051,
        s[11][1][3] = .051,
        s[11][1][5] = .051,
        s[11][1][10] = .052275,
        s[11][2][5] = .031875,
        s[11][2][10] = .036125,
        s[12] = [],
        s[12][1] = [],
        s[12][2] = [],
        s[12][1][1] = .066,
        s[12][1][3] = .066,
        s[12][1][5] = .066,
        s[12][1][10] = .06765,
        s[12][2][5] = .04125,
        s[12][2][10] = .04675,
        s[13] = [],
        s[13][1] = [],
        s[13][2] = [],
        s[13][1][1] = .0535,
        s[13][1][3] = .0575,
        s[13][1][5] = .0575,
        s[13][1][10] = .059,
        s[13][2][5] = .035,
        s[13][2][10] = .04,
        s[14] = [],
        s[14][1] = [],
        s[14][2] = [],
        s[14][1][1] = .03745,
        s[14][1][3] = .04025,
        s[14][1][5] = .04025,
        s[14][1][10] = .0413,
        s[14][2][5] = .0245,
        s[14][2][10] = .028,
        s[15] = [],
        s[15][1] = [],
        s[15][2] = [],
        s[15][1][1] = .045475,
        s[15][1][3] = .048875,
        s[15][1][5] = .048875,
        s[15][1][10] = .05015,
        s[15][2][5] = .02975,
        s[15][2][10] = .034,
        s[16] = [],
        s[16][1] = [],
        s[16][2] = [],
        s[16][1][1] = .05885,
        s[16][1][3] = .06325,
        s[16][1][5] = .06325,
        s[16][1][10] = .0649,
        s[16][2][5] = .0385,
        s[16][2][10] = .044,
        s[17] = [],
        s[17][1] = [],
        s[17][2] = [],
        s[17][1][1] = .051,
        s[17][1][3] = .055,
        s[17][1][5] = .055,
        s[17][1][10] = .0565,
        s[17][2][5] = .0325,
        s[17][2][10] = .0375,
        s[18] = [],
        s[18][1] = [],
        s[18][2] = [],
        s[18][1][1] = .0357,
        s[18][1][3] = .0385,
        s[18][1][5] = .0385,
        s[18][1][10] = .03955,
        s[18][2][5] = .02275,
        s[18][2][10] = .02625,
        s[19] = [],
        s[19][1] = [],
        s[19][2] = [],
        s[19][1][1] = .04335,
        s[19][1][3] = .04675,
        s[19][1][5] = .04675,
        s[19][1][10] = .048025,
        s[19][2][5] = .027625,
        s[19][2][10] = .031875,
        s[20] = [],
        s[20][1] = [],
        s[20][2] = [],
        s[20][1][1] = .0561,
        s[20][1][3] = .0605,
        s[20][1][5] = .0605,
        s[20][1][10] = .06215,
        s[20][2][5] = .03575,
        s[20][2][10] = .04125,
        s[21] = [],
        s[21][1] = [],
        s[21][2] = [],
        s[21][1][1] = .0485,
        s[21][1][3] = .0525,
        s[21][1][5] = .0525,
        s[21][1][10] = .054,
        s[21][2][5] = .03,
        s[21][2][10] = .035,
        s[22] = [],
        s[22][1] = [],
        s[22][2] = [],
        s[22][1][1] = .03395,
        s[22][1][3] = .03675,
        s[22][1][5] = .03675,
        s[22][1][10] = .0378,
        s[22][2][5] = .021,
        s[22][2][10] = .0245,
        s[23] = [],
        s[23][1] = [];
    s[23][2] = [],
        s[23][1][1] = .041225,
        s[23][1][3] = .044625,
        s[23][1][5] = .044625,
        s[23][1][10] = .0459,
        s[23][2][5] = .0255,
        s[23][2][10] = .02975,
        s[24] = [],
        s[24][1] = [],
        s[24][2] = [],
        s[24][1][1] = .05335,
        s[24][1][3] = .05775,
        s[24][1][5] = .05775,
        s[24][1][10] = .0594,
        s[24][2][5] = .033,
        s[24][2][10] = .0385,
        s[25] = [],
        s[25][1] = [],
        s[25][2] = [],
        s[25][1][1] = .046,
        s[25][1][3] = .05,
        s[25][1][5] = .05,
        s[25][1][10] = .0515,
        s[25][2][5] = .0275,
        s[25][2][10] = .0325,
        s[26] = [],
        s[26][1] = [],
        s[26][2] = [],
        s[26][1][1] = .0322,
        s[26][1][3] = .035,
        s[26][1][5] = .035,
        s[26][1][10] = .03605,
        s[26][2][5] = .01925,
        s[26][2][10] = .02275,
        s[27] = [],
        s[27][1] = [],
        s[27][2] = [],
        s[27][1][1] = .0391,
        s[27][1][3] = .0425,
        s[27][1][5] = .0425,
        s[27][1][10] = .043775,
        s[27][2][5] = .023375,
        s[27][2][10] = .027625,
        s[28] = [],
        s[28][1] = [],
        s[28][2] = [],
        s[28][1][1] = .0506,
        s[28][1][3] = .055,
        s[28][1][5] = .055,
        s[28][1][10] = .05665,
        s[28][2][5] = .03025,
        s[28][2][10] = .03575,
        s[29] = [],
        s[29][1] = [],
        s[29][2] = [],
        s[29][1][1] = .0435,
        s[29][1][3] = .0475,
        s[29][1][5] = .0475,
        s[29][1][10] = .049,
        s[29][2][5] = .0275,
        s[29][2][10] = .0325,
        s[30] = [],
        s[30][1] = [],
        s[30][2] = [],
        s[30][1][1] = .03045,
        s[30][1][3] = .03325,
        s[30][1][5] = .03325,
        s[30][1][10] = .0343,
        s[30][2][5] = .01925,
        s[30][2][10] = .02275,
        s[31] = [],
        s[31][1] = [],
        s[31][2] = [],
        s[31][1][1] = .036975,
        s[31][1][3] = .040375,
        s[31][1][5] = .040375,
        s[31][1][10] = .04165,
        s[31][2][5] = .023375,
        s[31][2][10] = .027625,
        s[32] = [],
        s[32][1] = [],
        s[32][2] = [],
        s[32][1][1] = .03828,
        s[32][1][3] = .0418,
        s[32][1][5] = .0418,
        s[32][1][10] = .04312,
        s[32][2][5] = .0242,
        s[32][2][10] = .0286,
        s[33] = [],
        s[33][1] = [],
        s[33][2] = [],
        s[33][1][1] = .03915,
        s[33][1][3] = .04275,
        s[33][1][5] = .04275,
        s[33][1][10] = .0441,
        s[33][2][5] = .02475,
        s[33][2][10] = .02925,
        s[34] = [],
        s[34][1] = [],
        s[34][2] = [],
        s[34][1][1] = .041325,
        s[34][1][3] = .045125,
        s[34][1][5] = .045125,
        s[34][1][10] = .04655,
        s[34][2][5] = .026125,
        s[34][2][10] = .030875,
        s[35] = [],
        s[35][1] = [],
        s[35][2] = [],
        s[35][1][1] = .045675,
        s[35][1][3] = .049875,
        s[35][1][5] = .049875,
        s[35][1][10] = .05145,
        s[35][2][5] = .028875,
        s[35][2][10] = .034125,
        s[36] = [],
        s[36][1] = [],
        s[36][2] = [],
        s[36][1][1] = .04785,
        s[36][1][3] = .05225,
        s[36][1][5] = .05225,
        s[36][1][10] = .0539,
        s[36][2][5] = .03025,
        s[36][2][10] = .03575,
        s[37] = [],
        s[37][1] = [],
        s[37][2] = [],
        s[37][1][1] = .0522,
        s[37][1][3] = .057,
        s[37][1][5] = .057,
        s[37][1][10] = .0588,
        s[37][2][5] = .033,
        s[37][2][10] = .039,
        s[38] = [],
        s[38][1] = [],
        s[38][2] = [],
        s[38][1][1] = .05655,
        s[38][1][3] = .06175,
        s[38][1][5] = .06175,
        s[38][1][10] = .0637,
        s[38][2][5] = .03575,
        s[38][2][10] = .04225
    return s
}
</script>
<style setup lang="scss">
.l-table {
    display: grid;
    grid-template-columns: repeat(4, auto);
    text-align: center;
    $len: 1, 2, 3, 4;

    @each $i in $len {
        .span-#{$i} {
            grid-column: span $i;
            @apply border border-gray-300 p-1.5;
        }
    }

}
</style>